<template>
	<view>
		<map id="myMap" style="width: 100%; height: 800rpx" :latitude="latitude" :longitude="longitude" enable-zoom
			enable-scroll></map>
		<!-- 首页展示 -->
		<view class="flex-between map-title-view">
			<view class="map-title-item" @click="isMakerPopup = true"
				style="background: url(../../static/image/24.png) no-repeat;background-size: 100% 100%;">
				<view class="fontSize-14 color-333 margin-bottom20">项目</view>
				<view class="flex-alignItems-center">
					<view class="color-000 fontWeight-bold" style="font-size: 23px;">70</view>
				</view>
			</view>
			<view class="map-title-item1"
				style="background: url(../../static/image/25.png) no-repeat;background-size: 100% 100%;">
				<view class="fontSize-14 color-333 margin-bottom20">测点</view>
				<view class="flex-alignItems-center">
					<view class="color-000 fontWeight-bold" style="font-size: 23px;">1578</view>
				</view>
			</view>
			<view class="map-title-item2"
				style="background: url(../../static/image/26.png) no-repeat;background-size: 100% 100%;">
				<view class="fontSize-14 color-333 margin-bottom20">预警点</view>
				<view class="flex-alignItems-center">
					<view class="color-000 fontWeight-bold" style="font-size: 23px;">2</view>
				</view>
			</view>
		</view>
		<view class="padding-20">
			<view class="bg-fff padding-20 border-radius10">
				<view class="fontSize-14 color-000 margin-bottom30">监控运行</view>
				<view class="flex-alignItems-center margin-bottom20">
					<view class="monitor-btn-view flex-center">在线 101</view>
					<view class="monitor-btn-view1 flex-center">离线 16</view>
				</view>
				<view class="flex-alignItems-center margin-bottom30">
					<image class="monitor-image margin-right20" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
					<image class="monitor-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
				</view>

				<view class="flex-between margin-bottom30">
					<view class="fontSize-15 color-000">实时监测信息</view>
					<view class="flex-alignItems-center" @click="$tools.navigateTo('/pages/monitor/monitor-list')">
						<view class="fontSize-13" style="color: #4B6DFD;">全部</view>
						<u-icon name="arrow-right" color="#4B6DFD" size="15"></u-icon>
					</view>
				</view>
				<view class="monitor-list-view">
					<view class="monitor-item-view margin-bottom30">
						<view class="flex-between margin-bottom20">
							<view class="fontSize-12 color-000">G60 K376-980</view>
							<view class="fontSize-12 color-000">西北院-景文高速边坡监测</view>
						</view>
						<view class="flex-between margin-bottom20">
							<view class="fontSize-12 color-000">HZ-GS-G2504-JC002-SB3</view>
							<view class="fontSize-12 color-000">深部位移 X方向</view>
						</view>
						<view class="flex-between">
							<view class="fontSize-12 color-000">2024-11-11 14:00:01</view>
							<view class="flex-alignItems-center">
								<view class="monitor-icon-view margin-right10"></view>
								<view class="fontSize-12" style="color: #EF3C34;">红色预警</view>
							</view>
						</view>
					</view>
					<view class="monitor-item-view1 margin-bottom30">
						<view class="flex-between margin-bottom20">
							<view class="fontSize-12 color-000">G60 K376-980</view>
							<view class="fontSize-12 color-000">西北院-景文高速边坡监测</view>
						</view>
						<view class="flex-between margin-bottom20">
							<view class="fontSize-12 color-000">HZ-GS-G2504-JC002-SB3</view>
							<view class="fontSize-12 color-000">深部位移 X方向</view>
						</view>
						<view class="flex-between">
							<view class="fontSize-12 color-000">2024-11-11 14:00:01</view>
							<view class="fontSize-12" style="color: #53CB1D;">最新数据</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 坐标弹窗 -->
		<u-popup :show="isMakerPopup" :round="0" :overlay="false" @close="closePopup" closeable>
			<view class="popup-view1">
				<view class="flex-center margin-bottom50">
					<view class="risk-popup-iconview"></view>
				</view>
				<!-- 标题 -->
				<view class="flex-between margin-bottom30">
					<view class="fontSize-15 color-000">工点编号: ZJ-WZ-WC-G4012-01</view>
					<view class="flex-alignItems-center">
						<view class="fontSize-13" style="color: #4B6DFD;">查看全部监测点</view>
						<u-icon name="arrow-right" color="#4B6DFD" size="15"></u-icon>
					</view>
				</view>
				<!-- 弹窗信息 -->
				<view class="flex-between margin-bottom20">
					<view class="fontSize-13 color-666">工点名称: K330+745 左侧</view>
					<view class="fontSize-13 color-666">监测对象类型: 边坡</view>
				</view>
				<view class="fontSize-13 color-666 margin-bottom20">测点数量: 41</view>
				<view class="fontSize-13 color-666 margin-bottom20">所属区县: 浙江省温州市文成县</view>
				<view class="fontSize-13 color-666 margin-bottom20">所属项目: 西北院-景文高速边坡监测</view>
				<!-- 折叠层 -->
				<uni-collapse accordion>
					<uni-collapse-item title="监控视频">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">监控视频</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText1"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon1 margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText2"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon2 margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="深部位移">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">深部位移</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="地表位移">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">地表位移</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="降雨量">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">降雨量</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="温度湿度">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">温度湿度</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="沉降位移">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">沉降位移</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="拉线位移">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">拉线位移</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="水平位移">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">水平位移</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse accordion>
					<uni-collapse-item title="多维倾角仪">
						<template v-slot:title>
							<view class="flex-between collapse-title">
								<view class="fontSize-14 color-000">多维倾角仪</view>
								<view class="monitor-icon-view margin-right10"></view>
							</view>
						</template>
						<view class="collapse-content margin-bottom10">
							<view class="flex-between margin-bottom10">
								<view class="flex-alignItems-center">
									<view class="collapse-iconText"></view>
									<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
								</view>
								<view class="collapse-icon margin-left20 flex-center">正常</view>
							</view>
							<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 39.904989,
				longitude: 116.405285,
				isMakerPopup: false
			}
		},
		methods: {
			// 关闭坐标弹窗
			closePopup() {
				this.isMakerPopup = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 异常状态
	.collapse-iconText2{
		width: 6rpx;
		height: 30rpx;
		background: #F59A0D;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	.collapse-iconText1{
		width: 6rpx;
		height: 30rpx;
		background: #EF3C34;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	.collapse-iconText{
		width: 6rpx;
		height: 30rpx;
		background: #39C477;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	.collapse-icon2{
		width: 80rpx;
		height: 40rpx;
		background: #F59A0D;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
	.collapse-icon1{
		width: 80rpx;
		height: 40rpx;
		background: #EF3C34;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
	.collapse-icon{
		width: 80rpx;
		height: 40rpx;
		background: #39C477;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
	.collapse-title {
		padding: 30rpx 0;
	}

	.collapse-content {
		padding: 15rpx;
		background-color: #F7F7F7;
		border-radius: 10rpx;
	}

	// 坐标弹窗
	.jiance-icon {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #EF3C34;
		flex-shrink: 0;
	}

	.risk-popup-iconview {
		width: 90rpx;
		height: 7rpx;
		background: #D5D5D5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.popup-view1 {
		padding: 30rpx 20rpx 30rpx 20rpx;
		background-color: #ffffff;
		height: 800rpx;
		overflow-y: auto;
	}

	// 列表
	.monitor-icon-view {
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
		background-color: #EF3C34;
		border-radius: 50%;
	}

	.monitor-item-view1 {
		padding: 20rpx;
		background: linear-gradient(180deg, #EFF5FF 0%, #FFFFFF 100%);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}

	.monitor-item-view {
		padding: 20rpx;
		background: linear-gradient(180deg, #FFECEB 0%, #FFFFFF 100%);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}

	.monitor-image {
		flex: 1;
		height: 220rpx;
		flex-shrink: 0;
	}

	// 监控
	.monitor-btn-view1 {
		width: 180rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
		background: #F0F0F0;
		box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, 0.19);
		border-radius: 10rpx;
	}

	.monitor-btn-view {
		width: 500rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #357CFF;
		box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.31);
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	// 地图
	.map-title-view {
		position: absolute;
		top: 30rpx;
		left: 20rpx;
		z-index: 100;
		width: 95%;
	}

	.map-title-item {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}

	.map-title-item1 {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}

	.map-title-item2 {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}
</style>